<template>
    <div class="header">
        <div class="center">
            <div class="left">
                <div class="logo" @click="toHome">
                    <img :src="baseURL + settingStore.current.logo" alt="">
                    <span>{{ settingStore.current.logo_name }}</span>
                </div>
                <nav>
                    <router-link v-for="item in menu.list" :key="item.id" :to="item.path"
                        :class="{ 'active': item.id === menu.active }" @click="change(item.id)">{{ item.text
                        }}</router-link>
                </nav>
            </div>

            <div class="right">
                <div class="search">
                    <el-input v-model="keyword" @change="search" class="w-50 m-2" placeholder="请输入商品名称"
                        :prefix-icon="Search" />
                </div>
                <div class="login">

                    <!-- 未登录显示 -->
                    <a v-if="!isLogin" @click="isShowDialog = true">登录/注册</a>

                    <!-- 登录之后显示 -->

                    <el-dropdown v-else @command="handleCommand">
                        <div class="username">
                            <el-icon size="22">
                                <User />
                            </el-icon>
                            <span>{{ userStore.userinfo.nickname }}</span>
                        </div>

                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item command="center">
                                    <el-icon size="22">
                                        <House />
                                    </el-icon>个人中心
                                </el-dropdown-item>
                                <el-dropdown-item command="cart">
                                    <el-icon size="22">
                                        <Goods />
                                    </el-icon>购物车
                                </el-dropdown-item>
                                <el-dropdown-item command="logout">
                                    <el-icon size="20">
                                        <SwitchButton />
                                    </el-icon>
                                    退出登录
                                </el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </div>
            </div>
        </div>
    </div>
    <el-dialog v-model="isShowDialog" title="登录/注册" width="40%" @close="closeDialog">
        <Login @close="closeDialog"></Login>
    </el-dialog>
</template>

<script setup>
import { ref, reactive, watch, onMounted, computed } from 'vue'
import { Search, User, Goods, House, SwitchButton } from '@element-plus/icons-vue'
import { useRouter, useRoute } from 'vue-router'
import { useUserStore } from '@/stores/useUser'
import Login from '@/components/Login/Login.vue'
import { ElMessage } from 'element-plus'
import { useSettingStore } from '@/stores/useSetting'
import { baseURL } from '@/config/baseURL'

const router = useRouter()
const route = useRoute()

const userStore = useUserStore()
const settingStore = useSettingStore()

const menu = reactive({
    active: 0,
    list: [
        {
            id: 0,
            text: '首页',
            path: '/'
        },
        {
            id: 1,
            text: '商城',
            path: '/goods'
        },
        {
            id: 2,
            text: '关于',
            path: '/about'
        }
    ]
})

const keyword = ref('')

const change = (id) => {
    menu.active = id
}

//跳转到首页
const toHome = () => {
    router.push('/')
}

const isShowDialog = ref(false)

//关闭对话框
const closeDialog = () => {
    isShowDialog.value = false
}

const handleCommand = (command) => {
    if (command === 'logout') {
        sessionStorage.clear()
        userStore.isLogin = false
        userStore.userinfo = {
            id: 0,
            username: ''
        }
        router.push('/')

    }
    if (command === 'center') {
        router.push('/user')

    }
    if (command === 'cart') {
        router.push('/user/list')
    }
}

onMounted(() => {
    //监听路由变化
    watch(() => route.path, (newVal) => {
        if (newVal === '/') {
            change(0)
        } else if (newVal === '/goods') {
            change(1)
        } else if (newVal === '/about') {
            change(2)
        } else {
            change(-1)
        }
    })
})

const isLogin = computed(() => {
    return userStore.isLogin
})

const search = () => {
    if (keyword.value === '') {
        ElMessage.warning('请输入搜索内容')
        return
    }
    //路由传参
    router.push({
        path: '/goods',
        query: {
            keyword: keyword.value
        }
    })
}


</script>

<style scoped lang='less'>
.header {
    width: 100%;
    height: 70px;
    border-bottom: 1px solid #ccc;

    .center {
        width: 1200px;
        height: 100%;
        margin: auto;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .left {
            width: 80%;
            display: flex;
            align-items: center;

            .logo {
                display: flex;
                align-items: center;
                user-select: none;
                cursor: pointer;

                img {
                    height: 45px;
                }

                span {
                    font-size: 20px;
                    margin-left: 10px;
                    color: #383838;
                    letter-spacing: 3px;
                }
            }

            nav {
                width: 40%;
                line-height: 70px;
                display: flex;
                justify-content: space-evenly;
                font-size: 18px;
                letter-spacing: 3px;
                margin-left: 30px;

                a {
                    color: #777;
                }
            }

            .active {
                color: #409eff;
                font-size: 20px;
            }
        }

        .right {
            flex: 1;
            display: flex;
            justify-content: end;
            font-size: 18px;
            line-height: 80px;

            .search {
                width: 250px;
            }

            .login {
                width: 200px;
                display: flex;
                align-items: center;
                justify-content: end;

                a {
                    color: #777;
                    cursor: pointer;
                    user-select: none;
                }

                div {
                    display: flex;
                    align-items: center;

                    .username {
                        margin-left: 20px;
                        cursor: pointer;

                        span {
                            font-size: 18px;
                            margin-left: 5px;
                        }
                    }
                }


            }
        }
    }
}
</style>